import { useState } from 'react';
import './StudyExam.css';
import { Button, Card, Select } from 'antd';
import { httpPost } from '@utils/HttpUtil';
import { getPreviewUrl } from '@utils/WeStudyUtil';

function StudyExam() {


   const url = getPreviewUrl();

  const subjectList = httpPost("/problemKnowledge/getSubjectWithProblem", {}).data;

  const [subjectId, setSubjectId] = useState(subjectList[0].id);
  const [problemList, setProblemList] = useState(httpPost("/problemKnowledge/exam", { subjectId: subjectList[0].id }).data);
  const [problemIndex, setProblemIndex] = useState(0);

  const changeProblem = ()=>{
    if(problemIndex >= problemList.length - 1) {
        setProblemIndex(0);
    }else{
        setProblemIndex(problemIndex+1);
    }
  }

  const selectSubject = (subjectId: any)=>{
    setSubjectId(subjectId);
    const problemList = httpPost("/problemKnowledge/exam", { subjectId: subjectId }).data;
    setProblemList(problemList);
    setProblemIndex(0);
  }

  return (
    <div className="container">
      <Select
        defaultValue={subjectId}
        style={{ width: 120 }}
        onChange={selectSubject}
        options={subjectList.map((subject: any) => ({
          label: subject.name,
          value: subject.id,
        }))}
      />
      <Card
        title={problemList[problemIndex].title}
        hoverable
        style={{ marginTop: 20 }}
        cover={
          <img
            height={360}
            style={{ objectFit: "contain" }}
            src={url + problemList[problemIndex].problemImg}
            className="responsive-image"
          />
        }
      ></Card>

      <Card
        title="答案"
        hoverable
        style={{ marginTop: 20 }}
        cover={
          <img
            height={360}
            style={{ objectFit: "contain"}}
            src={url + problemList[problemIndex].explainImg}
            className="responsive-image"
          />
        }
      ></Card>
      <Button
        type="primary"
        size="large"
        onClick={changeProblem}
        style={{
          marginLeft: "20%",
          width: "60%",
          height: 50,
          background: "#52c41a",
          borderColor: "#52c41a",
          borderRadius: 8,
          fontSize: 16,
          marginTop: 20,
        }}
      >
        切换题目
      </Button>
    </div>
  );
}

export default StudyExam;